<!doctype html>
<html>
  <head>
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <style type='text/css'>
      html { font-family:Helvetica; color:#222; }
      h1 { color:steelblue; font-size:24px; margin-top:24px; }
      button { margin:0 3px 10px; font-size:12px; }
      .logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
    </style>
  </head>
  
  <body>
    <h1>WebViewJavascriptBridge Demo</h1>
    
    <script>
      window.onerror = function(err) {
        log('window.onerror: ' + err)
      }
    
      /*这段代码是固定的，必须要放到js中*/
      function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) {
            return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
      }
    
      /*与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
      setupWebViewJavascriptBridge(function(bridge) {
                                   
                                   
       var uniqueId = 1
       function log(message, data) {
         var log = document.getElementById('log')
         var el = document.createElement('div')
         el.className = 'logLine'
         el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
         if (log.children.length) {
            log.insertBefore(el, log.children[0])
         } else {
           log.appendChild(el)
         }
       }
                                   
                                   
       /* Initialize your app here */
       
       /*我们在这注册一个js调用OC的方法，不带参数，且不用ObjC端反馈结果给JS：打开本demo对应的博文*/
       bridge.registerHandler('openWebviewBridgeArticle', function() {
          log("点击了 <打开博文>按钮 openWebviewBridgeArticle was called with by ObjC")
       })
       /*JS给ObjC提供公开的API，在ObjC端可以手动调用JS的这个API。接收ObjC传过来的参数，且可以回调给ObjC*/
       bridge.registerHandler('getUserInfos', function(data, responseCallback) {
         log("这是在H5中的getUserInfos 接收的从ObjC传过来的参数", data)
         responseCallback({'userId': '123456', 'blog': '标哥的技术博客'})
       })
                                   
       /*JS给ObjC提供公开的API，ObjC端通过注册，就可以在JS端调用此API时，得到回调。ObjC端可以在处理完成后，反馈给JS，这样写就是在载入页面完成时就先调用*/
       bridge.callHandler('getUserIdFromObjC', function(responseData) {
         log("这是在H5中的getUserIdFromObjC方法对应的参数responseData的值", responseData)
       })

       document.getElementById('blogId').onclick = function (e) {
         log('js call objc: getBlogNameFromObjC')
                                   
        //{'blogURL': 'http://www.henishuo.com'} 这是json字符串,传到iOS端会被WebViewJavascriptBridge自动转换成id对象，然后在回调处看到的就是字典对象了。
         bridge.callHandler('getBlogNameFromObjC', {'blogURL': 'http://www.baidu.com'}, function(response) {
                          log('JS got response', response)
                          })
       }
     })
       
    </script>
    
    <div id='buttons'></div> <div id='log'></div>
    
    <div>
       <input type="button" value="getBlogNameFromObjC" id="blogId"/>
    </div>
  </body>
</html>
